import { ShelfPaper } from '@/api/Shelf';
import { CityPicker } from '@/components/CityPicker';
import TestPaperDetail from '@/components/resourceLibraryComp/TestPaperDetail';
import { TradeCascaderSelect } from '@/components/TradeCascaderSelect';
import { useReactive } from 'ahooks';
import { App, Cascader, Drawer } from 'antd';
import { useState } from 'react';
import type { YmColumnsType } from 'ym-design';
import { YmTable } from 'ym-design';
import { LeftClassTree } from '../../LeftClassTree';

type RecordType = ShelfPaper;

export function List() {
  const columns: YmColumnsType<RecordType> = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: 200,
    },
    {
      title: '组织类型',
      dataIndex: 'entTypeCodeText',
      key: 'entTypeCodeText',
      width: 200,
    },
    {
      title: '区域',
      dataIndex: 'area',
      key: 'area',
      ellipsis: true,
      width: 200,
    },
    {
      title: '行业',
      dataIndex: 'trade',
      key: 'trade',
      ellipsis: true,
      width: 200,
    },
    {
      title: '是否收费',
      dataIndex: 'isChargeText',
      key: 'isChargeText',
      width: 80,
    },
    {
      key: '_operate',
      title: '操作',
      width: 100,
    },
  ];
  const [extraParams, setExtraParams] = useState<{ classId?: string; parClassId?: string }>({
    classId: undefined,
    parClassId: undefined,
  });
  const { modal } = App.useApp();
  const detailsPorps = useReactive<{ props: { coursewareId: string } }>({ props: { coursewareId: '' } });
  const [treeRefresh, setTreeRefresh] = useState<number>();
  const refreshTableAndTree = () => {
    setTreeRefresh(Math.random());
    setExtraParams((v) => ({ ...v }));
  };

  return (
    <div className="safe_boss_pagelr">
      <div className="safe_boss_page_left">
        <LeftClassTree
          type="4"
          value={extraParams.classId}
          onSelect={(classId, parClassId) => {
            setExtraParams((p) => ({ ...p, classId, parClassId }));
          }}
          shelves
          refreshDeps={[treeRefresh]}
        ></LeftClassTree>
      </div>
      <div className="safe_boss_page_right">
        <YmTable
          searchForm={{
            formItems: [
              {
                label: '名称',
                name: 'name',
                valueType: {
                  type: 'input',
                },
              },
              {
                label: '组织类型',
                name: 'entTypeCode',
                valueType: {
                  type: 'select',
                  selectProps: {
                    allowClear: true,
                    placeholder: '全部',
                    options: [
                      {
                        value: 'government',
                        label: '政府',
                      },
                      {
                        value: 'association',
                        label: '协会',
                      },
                      {
                        value: 'qiye',
                        label: '企业',
                      },
                    ],
                  },
                },
              },
              {
                label: '行业',
                name: 'trade',
                // children: <TradeSelect allowClear placeholder="全部" />,
                children: <TradeCascaderSelect placeholder="全部" />,
              },
              {
                label: '区域',
                name: 'region',
                children: (
                  <CityPicker
                    showCheckedStrategy={Cascader.SHOW_CHILD}
                    multiple
                    allowClear
                    placeholder="全部"
                    maxTagCount={1}
                  />
                ),
              },
              {
                label: '是否收费',
                name: 'isCharge',
                valueType: {
                  type: 'select',
                  selectProps: {
                    options: [
                      { value: '1', label: '是' },
                      { value: '0', label: '否' },
                    ],
                    allowClear: true,
                    placeholder: '全部',
                  },
                },
              },
            ],
            span: 6,
          }}
          columns={columns}
          request={async ({ page }, form = {}) => {
            const { current = 0, pageSize = 10 } = page ?? {};
            console.log(extraParams.classId, form);
            const { region, ...params } = form;
            console.log(region);
            const data = await ShelfPaper.onShelfList(current, pageSize, {
              ...params,
              region: region
                ?.map((v: string[]) => {
                  return v[v.length - 1];
                })
                .join(','),
              classId: extraParams.classId,
            });
            return data;
          }}
          requestOptions={{
            reFreshDep: [extraParams],
          }}
          rowKey="guid"
          operate={[
            {
              text: '详情',
              key: 'detail',
              onClick(record) {
                detailsPorps.props = {
                  coursewareId: record.guid,
                };
              },
            },
            {
              text: '下架',
              key: 'listing',
              onClick(record) {
                modal.confirm({
                  title: '提示',
                  content: `确定要下架【${record.name}】吗?`,
                  async onOk() {
                    const { data, msg } = await ShelfPaper.shelf.down(record.guid);
                    if (data && data == 1) {
                      modal.confirm({
                        title: '提示',
                        content: msg,
                      });
                    }
                    setExtraParams((v) => ({ ...v }));
                  },
                });
              },
            },
          ]}
        ></YmTable>
        <Drawer
          width={800}
          open={Boolean(detailsPorps.props.coursewareId)}
          title="详情"
          bodyStyle={{
            background: '#eff2f5',
            padding: '12px',
          }}
          onClose={() => {
            detailsPorps.props.coursewareId = '';
          }}
        >
          <TestPaperDetail {...detailsPorps.props} />
        </Drawer>
      </div>
    </div>
  );
}
